<template>
  <div>
    <el-card>
      <el-row style="margin-top: 20px;margin-bottom: 20px;">
        <el-col :span="2">
          <span class="title-icon">请选择打印次数:</span>
        </el-col>
        <el-col :span="16">
          <el-radio-group v-model="printNum">
            <el-radio label="1">1</el-radio>
            <el-radio label="2">2</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="4">
          <el-button size="mini" type="danger" @click="getPrint"
            >选择打印机(Select printer)</el-button
          >
        </el-col>
        <el-col :span="2">
          <el-link
            type="primary"
            href="http://www.lodop.net/download.html"
            target="_blank"
            >LODOP官网</el-link
          >
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">扫描打单新(逐个打印)</span>
        </el-col>
      </div>
      <el-row style="margin-top: 20px;margin-bottom: 20px;margin-left: 50px;">
        <el-col :span="1">
          <span>箱号:</span>
        </el-col>
        <el-col :span="6">
          <el-input
            size="large"
            :rows="5"
            v-model="boxNo"
            placeholder=""
            ref="ref_1"
            @keyup.enter.native="scanPrintLabel"
          ></el-input>
        </el-col>
        <el-col :span="4" style="margin-left: 10px;">
          <el-button size="medium" type="primary" @click="scanPrintLabel"
            >打印(Print)</el-button
          >
        </el-col>
        <el-col
          :span="6"
          style="font-size:20px;font-weight:bold;margin-left: 10px;"
        >
          <span v-model="currentBox">{{ currentBox }}</span>
        </el-col>
        <el-col
          :span="6"
          style="font-size:20px;font-weight:bold;margin-left: 10px;"
        >
          <span v-model="currentCount">{{ currentCount }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="16"
          style="font-size:40px;font-weight:bold;margin-left:50px;color:#ff7575"
        >
          <span v-model="currentTips">{{ currentTips }}</span>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">扫描打单(批量打印)</span>
        </el-col>
      </div>
      <el-row style="margin-top: 20px;margin-bottom: 20px;margin-left: 50px;">
        <el-col :span="1">
          <span>九方箱号:</span>
        </el-col>
        <el-col :span="6">
          <el-input
            size="large"
            :rows="5"
            v-model="batchBoxNo"
            placeholder=""
            ref="ref_2"
            @keyup.enter.native="batchScanPrintLabel"
          ></el-input>
        </el-col>
        <el-col :span="4" style="margin-left: 10px;">
          <el-button size="medium" type="primary" @click="batchScanPrintLabel"
            >打印(Print)</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-col :span="12">
      <el-card>
        <el-table :data="scans" style="width: 100%">
          <el-table-column property="sorted" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column property="jiufangNo" label="已扫箱号">
          </el-table-column>
          <el-table-column property="fbaNo" label="FBA箱号"> </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <el-table :data="noScans" style="width: 100%">
          <el-table-column property="sorted" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column property="jiufangNo" label="未扫箱号">
          </el-table-column>
          <el-table-column property="fbaNo" label="FBA箱号"> </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <div>
      <el-dialog width="30%" title="选择打印机" :visible.sync="dialogVisible">
        <div slot="label">打印机列表：</div>
        <el-select
          filterable
          size="mini"
          v-model="printer"
          @change="selectPrint"
          placeholder="请选择打印机"
        >
          <el-option
            v-for="(item, value) in printerList"
            :key="value"
            :label="item.name"
            :value="parseInt(item.id)"
          />
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button size="mini" type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import {
  getLodop,
  lodopPrint,
  getPrinterList,
  lodopPrintImg
} from "@/store/yg/common/lodop";
export default {
  components: {},
  props: [],
  data() {
    return {
      boxNo: "",
      printer: "",
      batchBoxNo: "",
      currentBox: "",
      currentCount: "",
      currentTips: "",
      noScans: [],
      scans: [],
      waybillId: "",
      dialogVisible: false,
      printerList: [],
      pdfUrl: "",
      type: "",
      content: "",
      printNum: "2"
    };
  },
  computed: {},
  watch: {},
  labelUrlList: [],
  created() {},
  mounted() {
    this.initDat();
  },
  methods: {
    initDat() {
      this.boxNo = "";
      this.currentBox = "";
      this.currentCount = "";
      this.currentTips = "";
      this.$refs.ref_1.focus();
    },
    scanPrintLabel() {
      if (!this.boxNo) {
        this.$message.error("请输入箱号");
        return;
      }
      if (!this.printNum) {
        this.printNum = 1;
      }
      ajax("scanPrintLabel", {
        boxNo: this.boxNo,
        printNum: this.printNum
      }).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            var data = res.data;
            //this.content = data.content;
            this.pdfUrl = res.data2;
            this.type = data.type;
            //this.printName = data.printerName;
            this.currentBox = this.boxNo;
            this.waybillId = data.waybillId;
            const printer = localStorage.getItem("warehoues_printname");
            for (var i = 0; i < this.printNum; i++) {
              this._printWaybillLabelA4();
            }
            this.showScanPrintLabelRecordData(data.waybillId, data.waybillNo);
          } else {
            this.$message.error("操作失败" + res.message);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    batchScanPrintLabel() {
      if (!this.batchBoxNo) {
        this.$message.error("请输入箱号");
        return;
      }
      if (!this.printNum) {
        this.printNum = 1;
      }
      ajax("batchScanPrintLabel", {
        boxNo: this.batchBoxNo,
        printNum: this.printNum
      }).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            var data = res.data;
            this.type = data.type;
            this.labelUrlList = data.labelUrlList;
            this._batchPrintWaybillLabelA4();
          } else {
            this.$message.error("操作失败" + res.message);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    showScanPrintLabelRecordData(waybillId, waybillNo) {
      ajax("showScanPrintLabelRecordData", {
        id: waybillId,
        orderNo: waybillNo
      }).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            var data = res.data;
            this.currentCount = data.scanSize + "/" + data.totalSize;
            this.noScans = data.noScans;
            this.scans = data.scans;
          } else {
            this.$message.error("操作失败" + res.message);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    isNotNull(objStr) {
      if (
        objStr == "" ||
        objStr == null ||
        objStr == "null" ||
        objStr == "undefined" ||
        typeof objStr == "undefined"
      ) {
        return false;
      }
      if (objStr == undefined || typeof objStr == undefined) {
        return false;
      }
      if (typeof objStr == "object" && objStr.length < 1) {
        return false;
      }
      return true;
    },
    // LODOP 插件打印 A4
    _printWaybillLabelA4() {
      // 缓存中无打印机信息则弹窗选择打印机
      var warehoues_printname = localStorage.getItem("warehoues_printname");
      if (warehoues_printname == null) {
        this.dialogVisible = true;
        return;
      }
      var printerConfig = JSON.parse(warehoues_printname);
      if (printerConfig == null) {
        this.dialogVisible = true;
        return;
      }
      var name = printerConfig.name;
      var id = printerConfig.id;
      console.log("正在使用打印机,id:" + id + ",name:" + name + "进行打印面单");
      if (!this.isNotNull(name)) {
        this.$message.error("打印失败，无法获取打印机");
        return;
      }
      lodopPrint(printerConfig, this.pdfUrl, this.type);
      this.initDat();
    },
    // LODOP 插件打印 A4
    _batchPrintWaybillLabelA4() {
      // 缓存中无打印机信息则弹窗选择打印机
      var warehoues_printname = localStorage.getItem("warehoues_printname");
      if (warehoues_printname == null) {
        this.dialogVisible = true;
        return;
      }
      var printerConfig = JSON.parse(warehoues_printname);
      if (printerConfig == null) {
        this.dialogVisible = true;
        return;
      }
      var name = printerConfig.name;
      var id = printerConfig.id;
      console.log("正在使用打印机,id:" + id + ",name:" + name + "进行打印面单");
      if (!this.isNotNull(name)) {
        this.$message.error("打印失败，无法获取打印机");
        return;
      }
      lodopPrintImg(printerConfig, this.labelUrlList, this.type);
      this.initDat();
      this.$refs.ref_2.focus();
    },
    pdfprint() {
      var formData = new FormData();
      formData.append("action", "do_print");
      formData.append("printer_name", this.printName);
      formData.append("print_tool", "sumatrapdf");
      formData.append("print_qty", "1");
      formData.append("label", this.content);
      formData.append("type", this.type);
      axios.defaults.withCredentials = true;
      axios.defaults.headers.post["Access-Control-Allow-Origin"] = "*";
      axios({
        method: "post",
        url: "http://127.0.0.1:8001/",
        data: formData
      })
        .then(res => {
          if (res.data.code === 200) {
            console.log(res);
          } else {
          }
        })
        .catch(error => {});
    },
    /**
     * 获取打印机列表
     */
    getPrint() {
      this.dialogVisible = true;
      this.printerList = getPrinterList();
      // 缓存中加载已经选择的打印机
      var warehoues_printname = localStorage.getItem("warehoues_printname");
      if (warehoues_printname != null) {
        var localPrinter = JSON.parse(warehoues_printname);
        if (localPrinter) {
          this.printer = localPrinter.id;
        }
      }
    },
    /**
     * 选择打印机
     */
    selectPrint(e) {
      const target = this.printerList.find(x => x.id === e);
      console.log("id:" + target.id + ",name:" + target.name);
      localStorage.setItem("warehoues_printname", JSON.stringify(target));
    }
  }
};
</script>
<style scoped>
/deep/ .el-select.el-select--mini {
  width: 100%;
}
</style>
